<template>
  <div class="page-wrapper">
    <c-box title="电价模式" class="box">
      <div class="top item">
        <div style="font-size: 16px;">电价优化模式</div>
      </div>
      <div id="echart-1" v-loading="load1" class="echart item"></div>
      <div
        style="display: flex; justify-content: space-between; text-align: left; font-size: 16px;"
        class="item"
      >
        <div>本月电量</div>
        <div>次月预测电量</div>
      </div>
      <div id="echart-2" class="echart item"></div>
      <div style="text-align: left; margin-top: 20px;">
        <span style="margin-right: 8px;">次月最优电价模式：</span>
        <el-select v-model="curMod" size="mini" @change="modelChange">
          <el-option v-for="item in models" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </div>
      <div id="echart-3" class="echart item"></div>
    </c-box>
    <c-box title="功率因数" class="box">
      <div class="top item">
        <div style="font-size: 16px;">功率因数信息</div>
      </div>
      <div id="echart-4" class="echart item"></div>
      <div class="item">
        <div style="margin: 10px 0; text-align: left; font-size: 16px;">优化前后对比图</div>
        <c-compare-item :title="['功率因数调整前', '功率因数调整后']" :value="opti[0]" color="#FBA224" />
        <c-compare-item :title="['原力调电费', '现力调电费']" :value="opti[1]" color="#ABE900" />
        <c-compare-item :title="['原总电费', '现总电费']" :value="opti[2]" color="#A273E7" />
        <c-compare-item :title="['原均价', '现均价']" :value="opti[3]" color="#EF3063" />
      </div>
      <div class="item circle-wrapper" style="min-height: 300px">
        <div style="text-align: left; margin: 10px 0; font-size: 16px;">提升功率因数的方式</div>
        <div style="flex: 1;">
          <c-circle-type label="电力电容器补偿" color="#FF8918" radius="108" :pos="['15%', '14%']"></c-circle-type>
          <c-circle-type label="合适的变压器容量" color="#8AC951" radius="130" :pos="['50%', '15%']"></c-circle-type>
          <c-circle-type label="均衡用电负荷" color="#EF3063" radius="102" :pos="['87%', '12%']"></c-circle-type>
          <c-circle-type label="合适的电动机" color="#00C1FD" radius="90" :pos="['20%', '54%']"></c-circle-type>
          <c-circle-type label="调整生产班次" color="#F5CA21" radius="104" :pos="['55%', '66%']"></c-circle-type>
          <c-circle-type label="提升用电负荷率" color="#DD41F6" radius="88" :pos="['83%', '58%']"></c-circle-type>
        </div>
      </div>
    </c-box>
    <c-box title="削峰填谷" class="box">
      <div class="top">
        <div style="font-size: 16px;">预测电量</div>
      </div>
      <div id="echart-5" class="echart item" style="height: 220px;"></div>
      <div id="echart-6" class="echart item" style="flex: 1"></div>
    </c-box>
  </div>
</template>

<script>
const priColor = "#2AAEF2";
import CBox from "@/components/PageCard";
import echarts from "echarts";
import CCompareItem from "./components/CCompareItem";
import CCircleType from "./components/CCircleType";
import { colors, legend } from "@/utils/echarts";
import "echarts-liquidfill";
function toWan(v, n = 2) {
  const a = parseFloat(v) / 10000;
  return parseFloat(a.toFixed(n));
}
export default {
  components: {
    CBox,
    CCompareItem,
    CCircleType
  },
  data() {
    return {
      load1: true,
      date: "",
      modelData: [],
      models: [],
      curMod: "",
      baseInfo: {},
      xftgBaseInfo: {}
    };
  },
  computed: {
    opti() {
      if (!this.baseInfo.listYh) {
        return [["-", "-"], ["-", "-"], ["-", "-"], ["-", "-"]];
      }
      const a = this.baseInfo.listYh[0];
      const b = this.baseInfo.listYh[1];
      return [
        [a.cos, b.cos],
        [
          a.litiaofee > 10000
            ? toWan(a.litiaofee) + "w"
            : parseInt(a.litiaofee),
          b.litiaofee > 10000 ? toWan(b.litiaofee) + "w" : parseInt(b.litiaofee)
        ],
        [
          a.sumfee > 10000 ? toWan(a.sumfee) + "w" : parseInt(a.sumfee),
          b.sumfee > 10000 ? toWan(b.sumfee) + "w" : parseInt(b.sumfee)
        ],
        [a.avgfee, b.avgfee]
      ];
    },
    comId() {
      return this.$store.getters.comId;
    }
  },
  async mounted() {
    try {
      this.modelData = await this.getPricePattern();
      this.load1 = false;
      this.echart1 = echarts.init(document.getElementById("echart-1"));
      this.echart2 = echarts.init(document.getElementById("echart-2"));
      this.echart3 = echarts.init(document.getElementById("echart-3"));
      this.echart4 = echarts.init(document.getElementById("echart-4"));
      this.echart5 = echarts.init(document.getElementById("echart-5"));
      this.echart6 = echarts.init(document.getElementById("echart-6"));
      this.setOption1();
      await this.getPower();
      this.setOption2();
      this.setOption3();
      await this.getBaseInfo();
      this.setOption4();

      await this.getXftgBaseInfo();
      this.setOption5();
      this.setOption6();
    } catch (e) {
      this.$message.error(e);
      this.load1 = false;
    }
  },
  methods: {
    setOption1() {
      const _data = this.modelData.dyFees;
      const data1 = {
          name: "尖电费",
          type: "bar",
          barWidth: "10",
          data: []
        },
        data2 = {
          name: "峰电费",
          type: "bar",
          barWidth: "10",
          data: []
        },
        data3 = {
          name: "平电费",
          type: "bar",
          barWidth: "10",
          data: []
        },
        data4 = {
          name: "谷电费",
          type: "bar",
          barWidth: "10",
          data: []
        },
        data5 = {
          name: "容量电费",
          type: "bar",
          barWidth: "10",
          data: []
        },
        data6 = {
          name: "需量电费",
          type: "bar",
          barWidth: "10",
          data: []
        },
        data7 = {
          name: "总电费",
          type: "bar",
          barWidth: "10",
          data: []
        },
        xData = [];

      _data.map((d, i) => {
        // let data1 =
        this.models.push({
          id: i,
          name: d.type2
        });
        xData.push(d.type2);
        data1.data.push(toWan(d.jianfee));
        data2.data.push(toWan(d.fengfee));
        data3.data.push(toWan(d.pingfee));
        data4.data.push(toWan(d.gufee));
        data5.data.push(toWan(d.rlfee));
        data6.data.push(toWan(d.xlfee));
        data7.data.push(toWan(d.sumfee));
      });
      this.curMod = this.models[0].name;
      // await this.modelChange(this.curMod);
      const colors = [
        "#00C1FD",
        "#DD41F6",
        "#FFF94E",
        "#56FF4E",
        "#EF3063",
        "#A273E7",
        "#ECA00E"
      ];
      const option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true
        },
        xAxis: [
          {
            textStyle: {
              color: priColor
            },
            type: "category",
            data: xData,
            axisTick: {
              // alignWithLabel: true,
              show: false
            },
            axisLine: {
              lineStyle: {
                color: priColor
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "万元",
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [data1, data2, data3, data4, data5, data6, data7]
      };
      this.echart1.setOption(option);
    },
    setOption2() {
      const _data = this.bcPowers;
      const colors = [
        "#00C1FD",
        "#EF3063",
        "#DD41F6",
        "#FFF94E",
        "#56FF4E",
        "#A273E7",
        "#ECA00E"
      ];
      const [data1, data2] = _data.map(d => {
        return [
          toWan(d.jianpower),
          toWan(d.fengpower),
          toWan(d.pingpower),
          toWan(d.gupower)
        ];
      });

      const option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: [
          {
            left: "3%",
            right: "55%",
            bottom: "3%",
            top: "15%",
            containLabel: true
          },
          {
            left: "55%",
            right: "4%",
            bottom: "3%",
            top: "15%",
            containLabel: true
          }
        ],
        xAxis: [
          {
            textStyle: {
              color: priColor
            },
            type: "category",
            data: ["尖电量", "峰电量", "平电量", "谷电量"],
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLine: {
              lineStyle: {
                color: priColor
              }
            }
          },
          {
            textStyle: {
              color: priColor
            },
            gridIndex: 1,
            type: "category",
            data: ["尖电量", "峰电量", "平电量", "谷电量"],
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLine: {
              lineStyle: {
                color: priColor
              }
            }
          }
        ],
        yAxis: [
          {
            name: "万kw.h",
            type: "value",
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            name: "万kw.h",
            type: "value",
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "本月电量",
            type: "bar",
            barWidth: 14,
            data: data1
          },
          {
            name: "次月预测",
            type: "bar",
            barWidth: 14,
            data: data2,
            xAxisIndex: 1,
            yAxisIndex: 1
          }
        ]
      };
      this.echart2.setOption(option);
    },
    setOption3() {
      const d = this.modelData.cyFees.filter(e => e.type2 === this.curMod)[0];
      let data;
      console.log(d);
      if (!d) {
        data = [];
      } else {
        data = [
          { name: "尖电费", value: toWan(d.jianfee) },
          { name: "峰电费", value: toWan(d.fengfee) },
          { name: "平电费", value: toWan(d.pingfee) },
          { name: "谷电费", value: toWan(d.gufee) },
          { name: "容量电费", value: toWan(d.rlfee) },
          { name: "虚量电费", value: toWan(d.xlfee) },
          { name: "总电费", value: toWan(d.sumfee) }
        ];
      }
      const xData = [
        "尖电费",
        "峰电费",
        "平电费",
        "谷电费",
        "容量电费",
        "虚量电费",
        "总电费"
      ];
      const option = {
        color: colors,
        title: {
          text: this.curMod,
          textStyle: {
            color: priColor,
            fontSize: 16,
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true
        },
        xAxis: [
          {
            textStyle: {
              color: priColor
            },
            type: "category",
            data: xData,
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLine: {
              lineStyle: {
                color: priColor
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: 20,
            data: data
          }
        ]
      };
      this.echart3.setOption(option);
    },
    setOption4() {
      const b = this.baseInfo.baseInfo;
      const _data = [b.khcos, b.hybzInfo, b.sjcos, b.sjcosFirst],
        _colors = ["#0F99DF", "#FAEE04", "#DF48FF", "#40F453"],
        _titles = ["国家标准", "行业水平标准", "第一名", "实际功率因数"];
      const pos = 7.7;
      const titles = _titles.map((t, i) => {
        return {
          text: t,
          textStyle: {
            color: _colors[i],
            fontSize: 14,
            fontWeight: "normal"
          },
          textAlign: "center",
          left: `${pos * (2 + 3 * i)}%`,
          bottom: 0
        };
      });
      const data = _data.map((d, i) => {
        return {
          type: "liquidFill",
          radius: "90",
          center: [pos * (2 + 3 * i) + "%", "40%"],
          outline: {
            show: true,
            borderDistance: 1,
            itemStyle: {
              color: _colors[i],
              borderColor: _colors[i],
              borderWidth: 2
            }
          },
          label: {
            fontSize: 16,
            borderDistance: 0,
            formatter: ({ value }) => value
          },
          itemStyle: {
            color: _colors[i]
          },
          data: [d]
        };
      });

      const option = {
        title: titles,
        series: data
      };
      this.echart4.setOption(option);
    },
    setOption5() {
      const g1 = this.xftgBaseInfo.tzqpower,
        g2 = this.xftgBaseInfo.tzhpower;
      const data1 = [
          toWan(g1.jianpower),
          toWan(g1.fengpower),
          toWan(g1.pingpower),
          toWan(g1.gupower)
        ],
        data2 = [
          toWan(g2.jianpower),
          toWan(g2.fengpower),
          toWan(g2.pingpower),
          toWan(g2.gupower)
        ];
      const option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend,
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true
        },
        xAxis: [
          {
            textStyle: {
              color: priColor
            },
            type: "category",
            data: ["尖电量", "峰电量", "平电量", "谷电量"],
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLine: {
              lineStyle: {
                color: priColor
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "调整前",
            type: "bar",
            barWidth: 14,
            barGap: "70%",
            data: data1
          },
          {
            name: "调整后",
            type: "bar",
            barGap: "70%",
            barWidth: 14,
            data: data2
          }
        ]
      };
      this.echart5.setOption(option);
    },
    setOption6() {
      const s = this.xftgBaseInfo.sjfgfee,
        t = this.xftgBaseInfo.tzhfgfee,
        max = this.xftgBaseInfo.maxfee,
        data1 = [
          parseFloat(s.jianfee),
          parseFloat(s.fengfee),
          parseFloat(s.pingfee),
          parseFloat(s.gufee),
          parseFloat(s.mulufee),
          parseFloat(s.avgfee)
        ],
        data2 = [
          parseFloat(t.jianfee),
          parseFloat(t.fengfee),
          parseFloat(t.pingfee),
          parseFloat(t.gufee),
          parseFloat(t.mulufee),
          parseFloat(t.avgfee)
        ],
        maxData = [
          max.jianfee,
          max.fengfee,
          max.pingfee,
          max.gufee,
          max.mulufee,
          max.avgfee
        ];
      const /* data = [], */
        option = {
          title: {
            show: false
          },
          tooltip: {},
          legend,
          radar: {
            radius: "75%",
            axisLine: {
              lineStyle: {
                color: priColor,
                width: 2
              }
            },
            splitLine: {
              lineStyle: {
                color: priColor,
                width: 2
              }
            },
            name: {
              textStyle: {
                color: priColor
              }
            },
            splitArea: {
              areaStyle: {
                color: [
                  "transparent",
                  "#transparent",
                  "#transparent",
                  "#transparent"
                ]
              }
            },
            indicator: [
              { name: "尖电费", max: maxData[0] },
              { name: "峰电费", max: maxData[1] },
              { name: "平电费", max: maxData[2] },
              { name: "谷电费", max: maxData[3] },
              { name: "目录电费", max: maxData[4] },
              { name: "均价电费", max: maxData[5] }
            ]
          },
          series: [
            {
              name: "得分统计",
              type: "radar",
              itemStyle: { normal: { areaStyle: { type: "default" } } },
              data: [
                {
                  itemStyle: {
                    color: "#1BC85E",
                    borderColor: "#1BC85E"
                  },
                  value: data1,
                  name: "实际电费"
                },
                {
                  itemStyle: {
                    color: "#FAEE04",
                    borderColor: "#FAEE04"
                  },
                  value: data2,
                  name: "调整后电费"
                }
              ]
            }
          ]
        };
      this.echart6.setOption(option);
    },
    async getPricePattern(type) {
      this.load1 = true;
      const post = {
        id: this.comId
      };
      if (type) {
        post.type = type;
      }
      const res = await this.$axios.post("/eng/fees/pricePattern", post);
      this.load1 = false;
      return res.data;
    },
    async getPower() {
      const post = {
        id: this.comId
        // name: com.name
      };
      const res = await this.$axios.post("/eng/fees/bycyPower", post);
      if (res.code === 1) {
        this.bcPowers = res.data;
      }
      // this.setOption2(res.data);
      // this.setOption3();
    },
    modelChange(v) {
      this.curMod = v;
      this.setOption3;
    },
    async getBaseInfo() {
      const post = {
        id: this.comId
      };
      const res = await this.$axios.post("/eng/fees/baseInfo", post);
      this.baseInfo = res.data;
    },
    async getXftgBaseInfo() {
      const post = {
        id: this.comId
      };
      const res = await this.$axios.post("/eng/fees/xftgBaseInfo", post);
      this.xftgBaseInfo = res.data;
    }
  }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  color: #2aaef2;
  font-size: 14px;
  display: grid;
  grid-template-columns: 5fr 6fr 5fr;
  grid-template-rows: 1fr;
  grid-gap: 10px;
  /deep/ .box .card-container {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    .echart {
      flex: 1;
    }
  }
  .item {
    margin-top: 10px;
    &:nth-child(1) {
      margin-top: 0;
    }
  }
  .top {
    text-align: left;
  }
  .el-select {
    width: 200px;
  }
  .select {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.circle-wrapper {
  flex: 1;
  display: flex;
  position: relative;
  flex-direction: column;
  .com-circle-type {
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
